<template>
  <div class="box">
    <div class="from">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <div></div>
        <el-form-item label="名字:" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="用户名:" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码:" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="余额:" prop="money">
          <el-input v-model="ruleForm.money"></el-input>
        </el-form-item>
        <el-form-item label="账号状态:" prop="userstate">
          <el-switch v-model="ruleForm.userstate"></el-switch>
        </el-form-item>
        <el-form-item label="VIP" prop="vip">
          <el-select v-model="ruleForm.vip" placeholder="用户等级">
            <el-option label="普通用户" value="0"></el-option>
            <el-option label="VIP用户" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { adduser, editor,editoruser } from "../../api";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import router from "../../router";
export default {
  data() {
    return {
      props: [],
      ruleForm: {
        userName: "",
        password: "",
        phone: "",
        userState: "",
        money: "",
        vip: "",
        name: "",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "账号长度为6-12",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "change",
          },
          {
            min: 6,
            max: 12,
            message: "密码长度为6-12",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输手机号",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "手机号长度为11位",
            trigger: "blur",
          },
        ],
        money: [
          {
            required: true,
            message: "请填入金额",
            trigger: "blur",
          },
          {
            min: 0,
            max: 11,
            message: "金额大于0",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const route = useRouter();
          if (this.$route.params.id) {
                  editoruser(this.$route.params.id,this.ruleForm).then(res=>{
                   ElMessage.success(res.data.meg)
                  })
          } else {
            adduser(this.ruleForm).then((res) => {
              ElMessage.success(res.data.msg);
            });
          }
        } else {
          ElMessage.error("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created: function () {
    const that = this;
    if (this.$route.params.id) {
      editor(this.$route.params.id).then((res) => {
        this.ruleForm = res.data.data;
      });
    }
  },
};
</script>

<style scoped>
.box {
  width: 500px;
  height: 600px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 20px;
}
.from {
  width: 400px;
  margin: 0 auto;
}
</style>